<template>
  <a-layout-header :style="{ position: 'fixed',  width: '100%' }" class="admin-header">
    <router-link to="/" class="logo">
      <img src="@/assets/logo.jpg" class="logo-img"/>
      <h3 class="logo-title">小火柴卖的小孩的博客</h3>
    </router-link>
    <a-menu v-model:selectedKeys="current" mode="horizontal" class="header-menu" @click="changeMenu">
      <template v-for="item in menuList" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <a-sub-menu :key="item.key">
            <template #title> {{ item.title }}</template>
            <a-menu-item v-for="item_children in item.children" :key="item_children.key">
              {{ item_children.title }}
            </a-menu-item>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
    <!-- 右侧导航 -->
    <div class="header-right">
      <a-input class="search" v-model:value="searchKeywords" placeholder="搜点什么吧...">
        <template #prefix>
          <search-outlined :style="{fontSize: '16px', color: '#c7c7c7'}"/>
        </template>
      </a-input>
      <!-- 开关切换主题 -->
      <a-switch class="theme-switch"
                v-model:checked="checked"
                checked-children="默认"
                un-checked-children="黑夜"
                @change="change"
      />
    </div>
  </a-layout-header>
</template>

<script setup>
import {ref} from 'vue'
import {SearchOutlined} from '@ant-design/icons-vue';
import {toggleTheme} from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js";
import router from '@/router'

const menuList = [
  {
    key: 'home',
    title: '首页',
  }, {
    key: 'blog',
    title: '博客',
  }, {
    key: 'about',
    title: '关于本站',
    children: [
      {
        key: 'about-code',
        title: '博客源码'
      }, {
        key: 'about-note',
        title: '学习笔记'
      },
    ]
  }, {
    key: 'github',
    title: 'github',
  }
];

const searchKeywords = ref('')

const current = ref(["首页"])

const changeMenu = () => {
  console.log(current)
  router.push('/home')
}

const onSearch = () => {
  console.log('搜索:' + searchKeywords.value)
}
const checked = ref(false);

// 切换主题回调
const change = () => {
  // 如果开关打开，就切换为绿色主题，否则默认黄色主题
  toggleTheme({
    scopeName: (checked.value) ? "theme-green" : "theme-default",
  });
  console.log("已切换主题：" + checked.value);
}

</script>
<style lang="scss" scoped>
@import "index";
</style>
